<template>
  <div class="wrap">
    <div class="back" @click="back()">
      <i class="iconfont icon-shangyiyehoutuifanhui"></i>视频详情
    </div>
    <video
      ref="video"
      width="700"
      height="400"
      class="video-js"
      controls
      preload="auto"
    ></video>
    <div class="creatorInfo">
      <div class="user">
        <img :src="avatarUrl" />
        <div class="nickname">{{ nickname }}</div>
      </div>
      <div :class="`fllow ${isfllow ? 'isfllow' : ''}`" @click="fllow()">
        <i class="iconfont icon-zengjia" v-show="!isfllow"></i
        >{{ isfllow ? "已关注" : "关注" }}
      </div>
    </div>
    <div class="videoInfo">
      <h3>{{ title }}</h3>
      <div class="time-count">
        <span class="createTime">发布: {{ getTime(publishTime) }}</span>
        <span class="playCount">播放: {{ playCount(playTime) }}次</span>
      </div>
    </div>
    <ul class="tags">
      <li v-for="item in videoGroup" :key="item.id">{{ item.name }}</li>
    </ul>
    <div class="videodesc">{{ description }}</div>
    <div class="btn-box">
      <div class="praise" @click="VideoLike()">
        <i :class="`iconfont ${isLike==1 ? 'icon-dianzan' :'icon-dianzan_kuai'}`"></i>赞({{ praisedCount }})
      </div>
      <div class="star" @click="subVideo()">
        <i :class="`iconfont ${isSub==1?'icon-shoucang1':'icon-shoucang2'}`"></i>收藏({{ subscribeCount }})
      </div>
      <div class="share">
        <i class="iconfont icon-fenxiang1"></i>分享({{ shareCount }})
      </div>
    </div>
    <div class="comments">
      <h5>精彩评论</h5>
      <div class="commentList">
        <comment-item
          v-for="item in hotComment"
          :key="item.commentId"
          :id="id"
          :imgUrl="item.user.avatarUrl"
          :userName="item.user.nickname"
          :content="item.content"
          :time="item.time"
          :commentId="item.commentId"
          :likeCount="item.likedCount"
          :type="type"
          :reply="item.beReplied ? item.beReplied : null"
        ></comment-item>
      </div>
      <h5>最新评论({{totalCount}})</h5>
      <div class="commentList">
        <comment-item
          v-for="item in newComment"
          :key="item.commentId"
          :id="id"
          :imgUrl="item.user.avatarUrl"
          :userName="item.user.nickname"
          :content="item.content"
          :time="item.time"
          :commentId="item.commentId"
          :likeCount="item.likedCount"
          :type="type"
          :reply="item.beReplied ? item.beReplied : null"
        ></comment-item>
      </div>
        <paging :totalPages="totalPages" :pagingMethod="getNewComment"></paging>
    </div>
  </div>
</template>

<script>
import videoJs from "video.js";
import moment from "moment";
import CommentItem from "@/components/CommentItem";
import Paging from '@/components/Paging'
import {
  getVideoDetailAPI,
  getVideoUrlAPI,
  getMvUrlAPI,
  getMvDetailAPI,
  getMvStarAPI,
  getHotCommentAPI,
  getMusicCommentAPI,
  VideoLikeAPI,
  videoSubAPI,
  mvSubAPI,
  followUserAPI,
  followSingerAPI
} from "@/api";
export default {
  name: "Watch",
  components: {
    CommentItem,Paging
  },
  data() {
    return {
      videoInfo: {}, //视频信息
      videoUrl: "", //视频地址
      avatarUrl: "", //作者头像
      nickname: "", //作者名称
      userId:'',   //作者ID
      title: "", //视频标题
      publishTime: 0, //发布时间
      playTime: 0, //播放次数
      videoGroup: [], //标签数组
      praisedCount: 0, //视频获赞
      description: "", //视频描述
      subscribeCount: 0, //视频收藏数
      shareCount: 0, //视频分享
      isfllow: false, //是否关注
      hotComment: [], //热评数组
      newComment: [], //最新评论数组
      type: 0, //资源类型
      totalCount:0,  //评论总数
      totalPages:0,  //评论页数
      isSub:1,      //是否收藏视频
      isLike:1,     //是否收藏视频
    };
  },
  methods: {
    // 获取视频数据
    async getVideoDetail() {
      const res = await getVideoDetailAPI({ id: this.id });
      if (res.data.code === 200) {
        //   获取到数据  储存
        this.videoInfo = res.data.data;
        this.avatarUrl = this.videoInfo.creator.avatarUrl;
        this.userId = this.videoInfo.creator.userId;
        this.isfllow = this.videoInfo.creator.followed;
        this.nickname = this.videoInfo.creator.nickname;
        this.title = this.videoInfo.title;
        this.publishTime = this.videoInfo.publishTime;
        this.playTime = this.videoInfo.playTime;
        this.description = this.videoInfo.description;
        this.videoGroup = this.videoInfo.videoGroup;
        this.praisedCount = this.videoInfo.praisedCount;
        this.subscribeCount = this.videoInfo.subscribeCount;
        this.shareCount = this.videoInfo.shareCount;
        // 获取播放地址
        this.getVideoUrl();
      } else alert("获取视频信息失败");
    },
    // 获取视频播放地址
    async getVideoUrl() {
      const res = await getVideoUrlAPI({ id: this.id });
      if (res.data.code === 200) {
        this.videoUrl = res.data.urls[0].url;
        this.initVideoPlayer();
      } else alert("获取视频地址失败");
    },
    // 获取Mv数据
    async getMvDetail() {
      const res = await getMvDetailAPI({ mvid: this.id });
      if (res.data.code === 200) {
        //   获取到数据  储存
        this.videoInfo = res.data.data;
        this.userId = this.videoInfo.artists[0].id;
        this.avatarUrl = this.videoInfo.artists[0].img1v1Url;
        this.isfllow = this.videoInfo.artists[0].followed;
        this.nickname = this.videoInfo.artistName;
        this.title = this.videoInfo.name;
        this.publishTime = this.videoInfo.publishTime;
        this.playTime = this.videoInfo.playCount;
        this.description = this.videoInfo.desc;
        this.videoGroup = this.videoInfo.videoGroup;
        this.subscribeCount = this.videoInfo.subCount;
        // 获取视频点赞收藏分享
        this.getMvStar();
        // 获取播放地址
        this.getMvUrl();
      } else alert("获取MV信息失败");
    },
    // 获取mv点赞数据
    async getMvStar() {
      const res = await getMvStarAPI({ mvid: this.id });
      if (res.data.code) {
        this.praisedCount = res.data.likedCount;
        this.shareCount = res.data.shareCount;
      } else alert("获取点赞数量失败");
    },
    // 获取mv播放地址z
    async getMvUrl() {
      const res = await getMvUrlAPI({ id: this.id });
      if (res.data.code == 200) {
        this.videoUrl = res.data.data.url;
        this.initVideoPlayer();
      } else alert("获取MV播放地址失败");
    },
    // 计算播放次数
    playCount(num) {
      if (num < 10000) {
        return num;
      } else {
        return Math.floor(num / 10000) + "万";
      }
    },
    // 计算发布时间
    getTime(time) {
      let timer = moment(time);
      return timer.format("YYYY-MM-DD");
    },
    // 初始化播放器方法
    initVideoPlayer() {
      const currentInstance = this.$video(this.$refs.video, {
        language: "zh-CN",
        autoplay: true, //是否自动播放
        controls: true, //是否显示控件
       
      });
      currentInstance.src({
        src: this.videoUrl,
      });
    },
    //回退
    back() {
      this.$router.back();
    },
    //获取热门评论
    async getHotComment() {
      const res = await getHotCommentAPI({ id: this.id, type: this.type });
      if (res.data.code == 200) {
        this.hotComment = res.data.hotComments;
      } else {
        alert("获取热门评论失败！");
      }
    },
    // 获取最新评论
    async getNewComment(n){
      let cursor = null;
      if(n>1) cursor = this.newComment[19].time;
      const res = await getMusicCommentAPI({id:this.id,type:this.type,pageNo:n,sortType:3,cursor});
      if(res.data.code==200){
        this.newComment = res.data.data.comments;
        this.totalCount = res.data.data.totalCount;
         this.totalPages = Math.ceil(this.totalCount/30); //设置总页数
      }else alert('获取最新评论失败');
    },
    // 关注用户或歌手
    async fllow(){
      let t = this.isfllow ? 0 : 1;
      let res = null;
      if(this.type===5){
        res = await followUserAPI({id:this.userId,t});
        if(res.data.code==200) this.isfllow = !this.isfllow;
        console.log(res);
      }else{
        res = await followSingerAPI({id:this.userId,t});
        console.log(res1);
      }
    },
    // 收藏视频
    async subVideo(){
      let res = null;
      if(this.type===5){
        res = await videoSubAPI({id:this.id,t:this.isSub});
        if(res.data.code==200){
          this.isSub = this.isSub == 1 ? 0 : 1;
        }
      }else{
        res = await mvSubAPI({id:this.id,t:this.isSub});
        if(res.data.code==200){
          this.isSub = this.isSub == 1 ? 0 : 1;
        }
      }
      console.log(res);
    },
    // 点赞视频
    async VideoLike(){
      const res = await VideoLikeAPI({id:this.id,type:this.type,t:this.isLike});
      if(res.data.code==200){
        console.log(res);
        this.praisedCount += this.isLike
        this.isLike = this.isLike==1 ? -1 : 1;
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    // 获取视频数据
    if (typeof this.id == "string") {
      this.type = 5;
      this.getVideoDetail();
    } else {
      this.type = 1;
      this.getMvDetail();
    }
    // 获取热门评论
    this.getHotComment();
    // 获取最新评论
    this.getNewComment(1);

  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 90%;
  margin: 0 auto;
  color: #333;
}
.back {
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  width: 100px;
  font-weight: bold;
  cursor: pointer;
  margin: 10px 0;
}
.video-js {
  width: 700px;
  height: 400px;
}
.creatorInfo {
  margin-left: 10px;
  margin-top: 10px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  .user {
    display: flex;
    margin-left: 10px;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .nickname {
    margin-left: 5px;
    line-height: 50px;
    font-size: 16px;
    color: #333;
  }
  .fllow {
    font-size: 14px;
    cursor: pointer;
    width: 100px;
    height: 30px;
    margin-top: 10px;
    margin-right: 40px;
    background-color: rgb(252, 244, 244);
    color: #ff7a9e;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    i {
      padding-right: 5px;
    }
  }
  .isfllow {
    color: #b0b0b0;
    background-color: rgb(248, 248, 248);
  }
}
.videoInfo {
  margin-left: 10px;
  margin-top: 20px;
  color: #444;
  h3 {
    margin: 0;
  }
  .time-count {
    margin-top: 15px;
    font-size: 12px;
    color: #b0b0b0;
    .playCount {
      margin-left: 20px;
    }
  }
}
.tags {
  margin-left: 10px;
  display: flex;
  margin-top: 15px;
  li {
    font-size: 12px;
    border-radius: 10px;
    font-weight: lighter;
    padding: 4px 6px 4px 6px;
    margin-right: 12px;
    background-color: rgb(247, 247, 247);
  }
}
.videodesc {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 15px;
  word-break: break-all;
}
.btn-box {
  margin-top: 20px;
  margin-left: 10px;
  display: flex;
  font-size: 14px;
  div {
    margin-right: 10px;
    height: 32px;
    color: #555;
    border: 1px solid #b0b0b0;
    background-color: #fff;
    line-height: 32px;
    padding: 0 15px;
    border-radius: 16px;
    cursor: pointer;
    i {
      font-size: 14px;
    }
  }
  .icon-dianzan_kuai{
    color: #ff7a9e;
    border-color: #ff7a9e;
  }
  div:hover {
    background-color: rgb(242, 242, 242);
  }
}
.comments {
  h5 {
    color: #444;
    margin-left: 10px;
  }
  .commentList {
    width: 90%;
    margin: 0 auto;
  }
}
</style>